<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp解决跨域</title>
</head>
<body>
<!--
    jsonp：JSON with Padding，只支持 get 请求.

    jsonp 解决跨域的原理：
        1. 绕开了 xhr，借助 script 标签发请求不受同源策略的限制。
        2. 有一种前端定义函数，后端调用函数的感觉。
 -->
<h3>jsonp解决跨域</h3>
<button id="btn">点我获取数据</button>
<script type="text/javascript">
    const btn = document.getElementById('btn')
    btn.onclick = () => {
        // 1. 创建 script 节点
        const scriptNode = document.createElement('script')
        // 2. 给节点指定 src 属性（请求地址）
        scriptNode.src = 'http://localhost:8080/test_jsonp?callback=demo'
        // 3. 将节点放入页面
        document.body.appendChild(scriptNode)
        // 4. 准备好一个函数
        window.demo = (a) => {
            console.log(a)
        }
        // 5. 移除已经使用过的 script 节点
        document.body.removeChild(scriptNode)
    }
</script>
</body>
</html>
